<template>
  <div class="module">
    <!-- 四个模块 景区 美食 酒店名宿 特色产品 -->
    <div class="module-1">
      <router-link :to="{name:'popular-area'}">
        <img src="../assets/景区222@3x.png" alt="" />
      </router-link>
    </div>
    <div class="module-2">
      <router-link :to="{name:'popular-food',query:{id:1}}">
        <img src="../assets/美食222@3x.png" alt="" />
      </router-link>
    </div>
    <div class="module-3">
      <router-link :to="{name:'popular-hotel',query:{id:1}}">
        <img src="../assets/酒店名宿222@3x.png" alt="" />
      </router-link>
    </div>
    <div class="module-4">
      <router-link :to="{name:'local-features',query:{id:1}}">
        <img src="../assets/特色产品222@3x.png" alt="" />
      </router-link>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.module{
  display: flex;
  flex-wrap: wrap;
  margin-top: 7px;
  margin-left: 7px;
  img{
    width: 165px;
    height: 80px;
  }
}
.module-1{
  margin-left: 8px;
  margin-top: 4px;
}
.module-2{
  margin-top: 4px;
  margin-left: 8px;
}
.module-3{
  margin-left: 8px;
  margin-top: 4px;
}
.module-4{
  margin-left: 8px;
  margin-top: 4px;
}
</style>
